<template>
  <view class="page-business">
    <view class="b-w inner">
      <u--form
        labelPosition="left"
        labelWidth="138rpx"
        :model="formData"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item label="原密码" prop="oldPassword" ref="item1">
          <u--input
            v-model="formData.oldPassword"
            type="password"
            placeholder="请输入原密码"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item label="新密码" prop="newPassword" ref="item1">
          <u--input
            v-model="formData.newPassword"
            type="password"
            placeholder="请输入新密码"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item label="确认密码" prop="againPassword" ref="item1">
          <u--input
            v-model="formData.againPassword"
            type="password"
            placeholder="请输入确认密码"
            border="none"
          ></u--input>
        </u-form-item>
      </u--form>
      <view class="confirm-btn">
        <u-button type="primary" text="提交" @click="submitMeta"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { encrypt } from '@/ext/aes'
export default {
  data() {
    return {
      formData: {
        oldPassword: '',
        newPassword: '',
        againPassword: '',
      },
      rules: {
        oldPassword: {
          type: 'string',
          required: true,
          message: '请输入原密码',
          trigger: ['blur', 'change'],
        },
        newPassword: {
          type: 'string',
          required: true,
          message: '请输入新密码',
          trigger: ['blur', 'change'],
        },
        againPassword: {
          type: 'string',
          required: true,
          message: '请重新输入新密码',
          trigger: ['blur', 'change'],
        },
      },
    }
  },
  onLoad() {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    submitMeta() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          if (this.formData.newPassword === this.formData.againPassword) {
            this.$request('/user/modifyPassword', {
              oldPassword: encrypt(this.formData.oldPassword),
              newPassword: encrypt(this.formData.newPassword),
            }).then((res) => {
              this.$utils.toast('修改成功')
              setTimeout(() => {
                uni.navigateBack({})
              }, 1500)
            })
          } else {
            uni.$u.toast('新密码两次输入不一样，请重新输入')
          }
        })
        .catch((errors) => {
          uni.$u.toast('请完善信息后提交')
        })
    },
  },
}
</script>

<style scoped lang="scss">
.confirm-btn {
  margin-top: 20rpx;
}
.page-business {
  padding: 20rpx;
  .inner {
    border-radius: 10rpx;
    padding: 20rpx;
    .header-my {
      border-bottom: 1rpx solid #c8c7cc;
      padding-bottom: 20rpx;
      .title {
      }
    }
  }
}
</style>
